<template>
  <div id="address">
    <div v-if="pcOnline">
      <group class="pc_country_select">
        <selector v-model="country[0]" :title="'居住国家或地区'" :options="countryDataPC" @on-change="onChangePC">

        </selector>
        <span v-show="item.required" style="position:absolute;top:12px;left:135px;" class="required">*</span>
      </group>
      <group>
        <cell title="居住城市" v-show="showAddress">
          <el-cascader
            :placeholder="item.title"
            expand-trigger="hover"
            :options="cityData"
            v-model="myAddressData"
            @change="onShadowChange"
          >
          </el-cascader>
        </cell>
      </group>
    </div>


    <div v-if="!pcOnline">
      <group>
        <popup-picker :title="'居住国家或地区'" :data="countryData" cancel-text="取消" confirm-text="完成"
                      :show-name=true v-model="country" @on-change="changeCountry"
                      :placeholder=" $t('form.choonseaddress')">
          <template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
            <span style="height:24px;">
                <span>{{$t('form.address')}}</span>
                <span :class="isRequired(item.required)">*</span>
              </span>
          </template>
        </popup-picker>
      </group>

      <group>
        <x-address v-show="showAddress" :title="item.label" :list="addressData" :placeholder=" $t('form.choonsecity')"
                   raw-value v-model='myAddressData' @on-hide="showaddress" @on-shadow-change="onShadowChange">
          <template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
            <span style="height:24px;">
                <span>{{$t('form.city')}}</span>
                <span :class="isRequired(item.required)">*</span>
              </span>
          </template>
        </x-address>
      </group>
    </div>


  </div>
</template>


<script type="text/ecmascript-6">
  /* eslint-disable*/

  /* eslint-disable*/
  import Vue from 'vue'
  import Address from '@/common/components/address.vue'

  import {indexedDB} from "@/api/indexedDB.js";

  import {cityData} from '@/common/locales/cityData.js'
  import {countryData} from '@/common/locales/countryData1.js'

  import {enCountryData} from '@/common/locales/enCountryData1.js'
  import {pcCountryData} from '@/common/locales/pcCountryData1.js'
  import {pcenCountryData} from '@/common/locales/pcenCountryData1.js'

  import {DatePicker, Cascader} from 'element-ui'
  Vue.use(DatePicker)
  Vue.use(Cascader)

  import {
    Selector,
    Group,
    Cell,
    XInput,
    GroupTitle,
    PopupPicker,
    XAddress
  } from 'vux'

  export default {
    props: {
      item: {
        type: Object,
        required: true
      },
      item1: {
        type: Object
      },
      index: {
        type: Number,
        required: true
      },
      pcOnline: {
        type: Boolean,
        required: true
      },
      cityData: {
        required: true
      }
    },
    data () {
      return {
        value: '',
        countryData: [],
        countryDataPC: [],
        showAddress: false,
        myAddressData: [],
        popsData: {},
        country: [],
        addressData: cityData,
        countryCode: '',
      }
    },
    created () {

      if (this.item.country) {
        console.log(this.item.country)
        this.country.push(this.item.country)
        if (this.item.country == '001') {
          this.showAddress = true
        }
      }

      if (this.item1) {
        if (this.item1.province && this.item1.city && this.item1.area) {
          this.addressData.push(this.item1.province)
          this.addressData.push(this.item1.city)
          this.addressData.push(this.item1.area)
        }
      }


      indexedDB('national', 'get', this.RACEID, '', function (a) {
        this.national = a;
        if (this.pcOnline) {
          if (this.national == '001' || this.national == '001081' || this.national == '001071' || this.national == '001082') {
            this.countryDataPC = pcCountryData
          } else {
            this.countryDataPC = pcenCountryData
          }
        } else {
          if (this.national == '001' || this.national == '001081' || this.national == '001071' || this.national == '001082') {
            this.countryData = countryData
          } else {
            this.countryData = enCountryData
          }
        }
      }.bind(this));

    },
    methods: {
      showaddress(b){
        if(b==true){
          this.popsData.country = '001'
          this.popsData.province =this.myAddressData[0]
          this.popsData.city = this.myAddressData[1]
          this.popsData.area = this.myAddressData[2]

          this.$emit('address', {
            data: this.popsData,
            index: this.index,
          })
        }


      },
      onShadowChange(ids, names){

        if (this.item1) {
          this.myAddressData[0] = this.item1.city.province
          this.myAddressData[1] = this.item1.city.city
          this.myAddressData[2] = this.item1.city.area
        }

        //console.log(this.countryCode)

        if (this.country[0] == '' || this.country[0] != '001') {
          this.popsData.province = ''
          this.popsData.city = ''
          this.popsData.area = ''
        } else {
          this.popsData.country = '001'
          this.popsData.province = ids[0]
          this.popsData.city = ids[1]
          this.popsData.area = ids[2]
        }


        this.$emit('address', {
          data: this.popsData,
          index: this.index,
        })

      },
      popAddress(){
        this.$emit('address', {
          index: this.index,
        })
      },
      isRequired: function (required) {
        if (required) {
          return 'required'
        }
        return 'norequired'
      },
      onChangePC(val){

        if (!val) {
          val = ''
        }
        if (val == '001') {
          this.showAddress = true
          this.countryCode = val
          this.popsData.country = this.countryCode
        } else {
          this.showAddress = false
          this.countryCode = val
          this.popsData.country = val
          this.popsData.province = ''
          this.popsData.city = ''
          this.popsData.area = ''
        }

        this.$emit('address', {
          data: this.popsData,
          index: this.index,
        })

      },
      changeCountry(val){


        if (!val) {
          val = ''
        }

        if (val[0] == '001') {
          this.showAddress = true
          this.countryCode = val[0]
          this.popsData.country = this.countryCode
          this.$emit('address', {
            data: this.popsData,
            index: this.index,
          })

        } else {
          this.showAddress = false
          this.countryCode = val[0]
          this.popsData.country = val[0]
          this.popsData.province = ''
          this.popsData.city = ''
          this.popsData.area = ''
        }

        this.$emit('address', {
          data: this.popsData,
          index: this.index,
        })

      },

    },
    components: {
      Selector,
      Cell,
      Group,
      XInput,
      GroupTitle,
      PopupPicker,
      XAddress
    }
  }
</script>


<style lang="less" rel="stylesheet/less">


</style>

